<template>
    <!-- 收藏夹弹窗 -->
    <view class="favoritePop">
        <view class="header">
            <view class="title">添加到收藏集</view>
            <view class="addFolder" @tap="addFolderToggle">+ 新建收藏集</view>
        </view>
        <scroll-view class="center" scroll-y>
            <Empty v-if="folderList.length === 0"></Empty>
            <view class="folder" v-for="(item, index) in folderList" :key="index" hover-class="hover"
                @tap="addItem(item)">
                <view class="left">
                    <text class="title">{{ item.collectionName }}</text>
                    <text class="sum">{{ item.contentCount }}篇</text>
                </view>
            </view>
        </scroll-view>
        <view class="cancel" @tap="close(false)">
            取消
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { Folder } from '@/type/favorite';
import Empty from '@/components/Empty.vue';
import { API_addFolder, API_addCollection } from '@/service/favorite';
import type { DetailArticle, ArticleImage, ArticleItem } from '@/type/article';

const props = defineProps<{
    folderList: Folder[];
    id: number;
    module: number

}>();
const emit = defineEmits(['close', 'open']);
const close = (favorite: boolean | null) => {
    emit('close', favorite);
}
const addFolderToggle = () => {
    emit('open');
}
//添加收藏
const addItem = async (item: Folder) => {
    //获取时间戳
    const stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
    // 格式化北京时间为"YYYY-MM-DD HH:mm:ss"
    const beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
    let res = await API_addCollection({
        content_id: props.id,
        collection_name: item.collectionName,
        collect_time: beijingTime,
        module: props.module
    })
    if (res.code === 1) {
        uni.showToast({
            title: '收藏成功',
            icon: 'none',
            mask: true
        })
        close(true);
    } else {
        uni.showToast({
            title: '收藏失败',
            icon: 'none',
            mask: true
        })
    }

}
</script>
<style scoped lang="scss">
.favoritePop {
    padding: 30rpx;
    font-size: 30rpx;

    .header {
        display: flex;
        justify-content: space-between;
        border-bottom: 1rpx solid #ddd;
        padding-bottom: 30rpx;

        .addFolder {
            color: $color-main;
        }
    }

    .center {
        height: 400rpx;

        .folder {
            padding: 30rpx 60rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 1rpx solid #ddd;
            background-color: #fff;

            .left {
                display: flex;
                flex-direction: column;

                .title {
                    font-size: 34rpx;
                    color: $color-title;
                    margin-bottom: 10rpx;
                }

                .sum {
                    font-size: 30rpx;
                    color: #666;
                }
            }
        }

        .hover {
            background-color: #ddddffaf;
        }
    }

    .cancel {
        padding: 30rpx 0;
        text-align: center;
        border-top: 1rpx solid #ddd;
        color: rgb(176, 17, 17)
    }
}
</style>
